<template>
  <div class="app-container">
    <div class="op-nav">
      <el-page-header @back="$router.back()" />
      <el-button-group>
        <el-button type="primary">提交</el-button>
        <el-button type="primary">暂存并关闭</el-button>
        <el-button type="primary">流程图</el-button>
      </el-button-group>
    </div>

    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="first"><basic-info /> </el-tab-pane>
      <el-tab-pane label="费用明细" name="second" :lazy="true">
        <detail-component :id="listQuery.id" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import BasicInfo from './components/basicInfo'
import detailComponent from './components/detailComp'

export default {
  name: 'ClientDetail',
  components: {
    detailComponent,
    BasicInfo
  },
  filters: {},
  data() {
    return {
      listQuery: {
        customerId: 0
      },
      activeName: 'first'
    }
  },

  created() {
    const id = this.$route.params && this.$route.params.id

    if (id) {
      this.listQuery.customerId = parseInt(id)
    }
    console.log('this.listQuery.customerId==', this.listQuery.customerId)
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.op-nav {
  display: flex;
  justify-content: space-between;
}
</style>
